<template>
    <div>
        <minbar title="注册" />
        <div class="form_field">
        	<div class="form_field_item">
        		<input type="text" v-model="phone" class="form_field_input" placeholder="请输入手机号">
        		<wxc-button text="获取验证码" size="small" :btnStyle="btnstyleCode" :textStyle="textStyleCode" @wxcButtonClicked="getCode"></wxc-button>
        	</div>
        	<div class="form_field_item"><input type="text" v-model="code" class="form_field_input" placeholder="请输入验证码"></div>
        	<div class="form_field_item">
        		<input :type="type" v-model="pass" class="form_field_input" style="padding-right: 80px;" placeholder="请输入密码">
        		<image v-if="!isShowPass" @click="passStatus" resize="stretch" src="https://github.com/yuxuemei/react-music-player/blob/master/app/images/hide_password.png?raw=true" class="hide_password"></image>
                <image v-if="isShowPass" @click="passStatus" resize="stretch" src="https://github.com/yuxuemei/react-music-player/blob/master/app/images/display_password.png?raw=true" class="display_password"></image>
        	</div>
        	<div class="agree_clause" @click="registerAgree">
        		<text v-if="!isAgree"class="check_normal"></text>
        		<image v-if="isAgree" resize="stretch" src="https://github.com/yuxuemei/react-music-player/blob/master/app/images/agree_checked.png?raw=true" class="agree_checked"></image>
        		<text class="agree">选中代表同意</text>
        		<text class="clause">《桃宝宝用户使用条款》</text>
        	</div>	
        	<wxc-button text="完成" @wxcButtonClicked="wxcButtonClicked" :btnStyle="btnstyle"></wxc-button>
        </div>
     </div>
</template>
<script>
import Minbar from "./../../components/minbar.vue"
import { WxcButton } from 'weex-ui'
import mixins from './../../mixins'
export default{
	mixins:[mixins],
	data:function(){
    	return{
    		btnstyle:{
	        	backgroundColor:'#f59800',
	        	color:'#fff',
	        	width:'680px',
	        	marginTop:'30px',
	        },
	        btnstyleCode:{
	        	backgroundColor:'#f59800',
	        	color:'#fff',
	        	width:'90px',
	        	marginTop:'50px',
	        	borderRadius:'20px',
                position:'absolute',
                right:'25px',
                top:'-35px'
	        },
	        textStyleCode:{
                fontSize:'22px'
	        },
	        isAgree:true,
	        isShowPass:false,
	        type:'password',
	        phone:'15928519844',
	        code:'',
	        pass:''
    	}
    },
	components:{ Minbar,WxcButton },
    methods:{
	        wxcButtonClicked:function(e){
	            console.log(e)
	        },
	        //获取验证码
	        getCode(){
               if(this.phone){
                    this.request({
                    	method:'post',
                   	    url:'api/sendcode',
                   	    data:{
                   	  	    mobile:this.phone,
                   	  	    type:1
                   	    }
                    }).then((res)=>{
                        console.log(res);
                    })
               }else{
               	this.confirm("请输入正确的电话号码")
               }
	        },
	        registerAgree(){
	        	this.isAgree = !this.isAgree;
	        },
	        passStatus(){
	        	this.isShowPass = !this.isShowPass;
	        	if(this.isShowPass){
	        		this.type = "text";
	        	}else{
	        		this.type="password";
	        	}
	        }
	    }
	}
</script>
<style scoped>
	.form_field{
		width: 680px;
		margin-left: 35px;
		margin-right: 35px;
	}
	.form_field_item{
       margin-top: 25px;
       position: relative;
	}
	.form_field_input{
		border-width: 1px;
		border-style: solid;
		border-color: #ddd;
		border-radius: 10px;
		height: 70px;
		line-height: 70px;
		padding-left: 10px;
		font-size: 23px;
	}
	.agree_clause{
		flex-direction: row;
		margin-top: 25px;
		justify-items: center;
	    align-items: center;
	}
	.check_normal,.agree_checked{
		width: 20px;
		height: 20px;
		margin-left: 25px;
		margin-right: 35px;
	}
	.check_normal{
		border-radius: 20px;
		background-color: #ddd;
		margin-left: 25px;
		margin-right: 35px;
	}
	.agree,.clause{
		font-size: 20px;
	}
	.clause{
		color: #7ab9fe;
	}
	.hide_password,.display_password{
		position: absolute;
		right: 25px;
		width: 30px;
		top: 30px;
	}
	.hide_password{
		height: 15px;
	}
	.display_password{
		height: 18px;
	}
</style>